<template>
<div class="about">
  <!-- <Header :bgcolor="'rgba(0,0,0,.8)'" /> -->

  <Carousel class="carousel-mar" :typeid="5" />

  <!-- tab栏 -->
  <div class="border-bot">
    <div class="flex product-module module-show margin-xauto">
      <div
        v-for="(nav, ix) in navs"
        :key="ix"
        @click="handleClick(nav)"
        class="product-module-item hand"
        :style="activeName == nav.name ? styleObj: ''"
      >{{nav.label}}</div>
    </div>
  </div>

  <!-- 关于我们 -->
  <div v-show="activeName == 1" class="module-show margin-xauto" animation="fadeInUp">
    <h3 class="left-border strong fc-b0 fs-l " :style="styleObjBorderColor">关于我们</h3>
    <div class="flex company-intro ">
      <div class="company-desc" :style="(getCompanyPhoto && getCompanyPhoto.length > 0) ? 'width: 55%;': 'width: 100%;'">
        <p class="fs-b" v-if="siteConfig && siteConfig.description" style="white-space: break-spaces;font-size: 14px;line-height: 28px;">{{siteConfig.description}}</p>
      </div>
      <div class="company-img" v-if="getCompanyPhoto && getCompanyPhoto.length > 0">
        <el-carousel height="250px" :interval="5000">
          <el-carousel-item v-for="(item, index) in getCompanyPhoto" :key="index" style="background-color: #eee;">
            <el-image :src="item.fullurl || item.url" style="height: 250px;width: 100%;">
              <div slot="placeholder" class="pac"><i class="el-icon-loading primary fs-xl"></i></div>
              <div slot="error" class="pac"><i class="el-icon-loading primary fs-xl"></i></div>
            </el-image>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <h3 class="left-border strong fc-b0 fs-l" :style="styleObjBorderColor" v-if="getCompanyHonour && getCompanyHonour.length > 0">荣誉证书</h3>
    <ul class="company-honour flex" v-if="getCompanyHonour && getCompanyHonour.length > 0">
      <li class="company-honour-item " v-for="(item, index) in getCompanyHonour" :key="index">
        <div class="company-honour-img">
          <el-image :src="item.fullurl" class="full-bg">
            <div slot="placeholder" class="pac"><i class="el-icon-loading primary fs-xl"></i></div>
            <div slot="error" class="pac"><i class="el-icon-loading primary fs-xl"></i></div>
          </el-image>
        </div>
        <div class="company-honour-title">{{item.title}}</div>
      </li>
    </ul>
  </div>

  <!-- 联系我们 -->
  <div v-show="activeName == 2" class="module-show margin-xauto">
    <h3 class="left-border strong fc-b0 fs-l" :style="styleObjBorderColor">联系我们</h3>
    <div class="flex contact-us">
      <div class="contact-map">
        <!-- <img src="static/images/about/map.png" alt=""> -->
        <!-- <GdMap @sendaddress="getAddress" /> -->
        <iframe :src="getIframeSrc" frameborder="0" style="width:660px;height:400px;"></iframe>
        <!-- <iframe src="https://ditu.amap.com/regeo?lng=119.253228&lat=26.066041&name=维构科技（福建）有限公司&src=mypage&callnative=0&innersrc=uriapi" frameborder="0" style="width:825px;height:500px;"></iframe> -->
      </div>
      <div class="contact-text">
        <p class="mgt2 fs-b fc-b1" v-if="siteConfig && siteConfig.company_name">{{siteConfig.company_name}}</p>
        <p class="mgt2 fs-b fc-b1" v-if="siteConfig && siteConfig.contact_phone">电话：{{siteConfig.contact_phone}}</p>
        <p class="mgt2 fs-b fc-b1" v-if="siteConfig && siteConfig.address">地址：{{siteConfig.address}}</p>
        <p class="mgt2 fs-b fc-b1" v-if="siteConfig && siteConfig.qq_service">QQ：{{siteConfig.qq_service}}</p>
        <div class="scan-qrcode fs-b fc-b1 flex">
          <div class="mgr2" v-if="siteConfig && siteConfig.full_qrcodeurl">
            <img :src="siteConfig.full_qrcodeurl" alt="" style="width: 130px;height: 130px;">
            <p class="mgt5 fs-b fc-b1 tac">扫一扫关注公众号</p>
          </div>
          <div v-if="siteConfig && siteConfig.full_wxacodeurl">
            <img :src="siteConfig.full_wxacodeurl" alt="" style="width: 130px;height: 130px;">
            <p class="mgt5 fs-b fc-b1 tac">微信客服</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <Aside />
  
  <Footer />
</div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  components: {
    Header: _ => import('@/components/common/Header'),
    Footer: _ => import('@/components/common/Footer'),
    Carousel: _ => import('@/components/common/Carousel'),
    GdMap: () => import('@/components/AMap/GDMap'),
    Aside: _ => import('@/components/common/Aside'),
  },
  computed: {
    ...mapGetters(['siteConfig']),
    getIframeSrc() {
      if (this.siteConfig && this.siteConfig.company_name) {
        return `https://lbs.amap.com/tools/showmap/?1_660_400_${this.siteConfig.location_lng}_${this.siteConfig.location_lat}&=${this.siteConfig.company_name}&=${this.siteConfig.address}&=&=${this.siteConfig.contact_phone}&=`
      }
      return ''
    },
    getCompanyHonour () {
      if (this.siteConfig && this.siteConfig.certificate_url) {
        let arr = JSON.parse(this.siteConfig.certificate_url)
        if (arr && arr.length > 0) {
          return arr
        }
      }
      return []
    },
    getCompanyPhoto () {
      if (this.siteConfig && this.siteConfig.company_photo) {
        let arr = JSON.parse(this.siteConfig.company_photo)
        if (arr && arr.length > 0) {
          console.log(arr)
          return arr
        }
      }
      return []
    },
  },
  data() {
    return {
      COMPANY_NAME: $globalconfig.COMPANY_NAME,
      SERVICE_HOTLINE: $globalconfig.SERVICE_HOTLINE,
      COMPANY_ADDRESS: $globalconfig.COMPANY_ADDRESS,
      SERVICE_QQ: $globalconfig.SERVICE_QQ,
      activeName: '1',
      navs: [
        {label: '公司简介', name: '1'},
        {label: '联系我们', name: '2'},
      ],
      styleObj: {
        borderColor: $globalconfig.THEME_COLOR,
        color: $globalconfig.THEME_COLOR,
      },
      styleObjBorderColor: {
        borderColor: $globalconfig.THEME_COLOR,
      },
    }
  },
  methods: {
    // 切换分类
    handleClick(val) {
      this.activeName = val.name
    },
    // 处理地址
    getAddress(data) {
      console.log(data)
    },
  }
}
</script>

<style lang="stylus" scoped>
.about
  width 100%
  min-width 1200px
  .carousel-mar
    margin-top 51px
  .module-show
    width 1200px
    .left-border
      padding 0 0 0 12px
      border-left 3px solid rgba(0,0,0,0)
      margin 50px 0 30px
    .company-intro
      justify-content space-between
      .company-desc
        width 55%
      .company-img
        width 40%
        img
          width 100%
          height 100%
    .company-honour
      justify-content space-between
      flex-wrap wrap
      .company-honour-item
        width 24%
        height 350px
        background-color #f2f2f2
        margin-bottom 30px
        position relative
        .company-honour-title
          height 40px
          width 100%
          position absolute
          color #fff
          bottom 0
          left 0
          line-height 40px
          text-align center
          background-color rgba(0,0,0,0.5)
        .company-honour-img
          width 100%
          height 100%
          position relative
          .el-image
            padding 20px
            position absolute
            top 50%
            left 50%
            transform translate(-50%, -50%)
            max-width 100%
            max-height 100%
    .contact-us
      justify-content space-between
      margin-bottom 60px
      .contact-map
        width 55%
        height 400px
      .contact-text
        width 30%
        .scan-qrcode
          margin-top 40px
          padding-left 0px
  .border-bot
    border-bottom 1px solid #eeeeee
    margin-top 30px
    .product-module
      .product-module-item
        font-size 15px
        padding 0 20px
        height 40px
        line-height 40px
        color #666
        margin-right 15px
        border-bottom 2px solid rgba(0,0,0,0)
</style>
